<template>
  <Header></Header>
  <Menu />
  <Search></Search>
  <div class="container-fluid novelcontainer">
    <div class="row random">
      全部书籍
    </div>
    <div v-for="novel in novels" :key="novel.novel_id" class="row g-0 novellist" @click="goToNovel(novel.novel_id)">
      <div class="col-4"><img :src="novel.novel_pic" @error="handleImageError($event, novel)" alt="Novel Image" class="novel-image" /></div>
      <div class="col novel_list_info">
        <div class="row novel_name">{{ truncate2(novel.novel_name) }}</div>
        <div class="row novel_author">作者：{{ novel.novel_author.nickname }}</div>
        <div class="row">简介：{{ truncate(novel.novel_desc) }}</div>
      </div>
    </div>
    <!-- 分页组件，接收 currentPage 和 totalPages -->
    <Pagination
        :totalPages="totalPages"
        :currentPage="currentPage"
        @pageChange="changePage"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import Pagination from '@/components/Pagination.vue'; // 引入分页组件
import Header from "@/components/Header.vue";
import Search from "@/views/index/Search.vue";
import Menu from "@/components/Menu.vue";
import config from "../../../config/config.js";
const route = useRoute(); // 获取当前路由
const router = useRouter(); // 路由实例

const currentPage = ref(parseInt(route.params.page, 10)); // 获取页码参数
const novels = ref([]); // 存储小说数据
const totalPages = ref(1); // 总页数

// 获取分页数据
const fetchNovels = async (page) => {
  try {
    const response = await axios.get(`${config.apiUrl}/novel/all?size=10&page=${page}`);
    novels.value = response.data.novels; // 更新小说数据
    totalPages.value = response.data.totalPages; // 更新总页数
  } catch (error) {
    console.error("Error fetching novels:", error); // 错误处理
  }
};


const truncate = (text) => {
  if (!text) return '';
  return text.length > 40 ? text.substring(0, 30) + '...' : text;
};
const truncate2 = (text) => {
  if (!text) return '';
  return text.length > 12 ? text.substring(0, 12) + '...' : text;
};

// 组件挂载时，获取初始数据
onMounted(() => {
  fetchNovels(currentPage.value); // 获取初始页面的小说数据
});

// 处理翻页
const changePage = (page) => {
  router.push(`/all-novels/${page}`); // 路由跳转
};
// 跳转到指定小说的函数
const goToNovel = (novelId) => {
  router.push(`/novel/${novelId}`); // 路由跳转
};
// 在组件中添加 handleImageError 方法
const handleImageError = (event, novel) => {
  if (!novel.errorHandled) {
    // 如果该图片未被处理过
    event.target.src = `${config.apiUrl}/uploads/nopic.png`; // 加载失败时替换为默认图片地址
    // 标记该图片已经被处理过
    novel.errorHandled = true;
  }
  //event.target.src = config.apiUrl + "/uploads/nopic.png";  将图片地址替换为默认图片地址
};
</script>

<style scoped>
.random{
  padding:10px 20px 0px 20px;
  font-weight: bold;
  font-size: 22px;
  letter-spacing: 2px;
}
.novellist{
  padding: 10px;
  cursor: pointer;
}
.novelcontainer{
  border-radius: 20px;
  width: 90%;
  padding: 10px;
  box-shadow:0px 0px 80px rgba(0, 0, 0, 0.06);
  margin-top: 10px;
}
.novellist img{
  width: 100px;
}
.novel_list_info{
  padding-left: 20px;
}
.novel_name{
  font-size: 17px;
  font-weight: bold;
}
.novel_author{
  padding: 4px 0px;
}
.novel-image{
   width: 135px;
   height: 138px;
}
</style>
